<!-- @format -->

<!DOCTYPE html>
<html>
	<head>
		<title>导航网站</title>
		<style>
			/* 居中搜索框 */
			.search-container {
				text-align: center;
				margin-top: 140px;
			}

			/* 百度图标样式 */
			#logo {
				width: 400px;
				/* 调整图标大小 */
				display: block;
				/* 使图标居中显示 */
				margin: 0 auto;
				/* 水平居中 */
			}

			/* 搜索框样式 */
			#searchBox {
				box-sizing: border-box;
				width: 800px;
				height: 70px;
				padding: 10px;
				padding-left: 30px;
				border: 3px solid #666;
				border-radius: 40px;
				font-size: 20px;
			}

			/* 取消搜索框点击时边框变色 */
			#searchBox:focus {
				outline: none;
				box-shadow: 2px 5px 10px 5px rgba(0, 0, 0, 0.4);
			}

			.hover {
				box-shadow: 2px 5px 10px 5px rgba(0, 0, 0, 0.4);
			}

			/* 常用网站 */
			.common-websites {
				width: 760px;
				height: 50px;
				margin: 0 auto;
				margin-top: 40px;
				padding-left: 10px;
				/* background: palegreen; */
			}

			.icon-style {
				width: 50px;
				margin-right: 20px;
			}
		</style>
	</head>

	<body>
		<!-- 百度图标 -->
		<div class="search-container">
			<img id="logo" src="./baidu1.png" onclick="changeImage()" />
			<input type="text" id="searchBox" class="" onkeydown="searchOnBaidu(event)" placeholder="" />
		</div>
		<div class="common-websites">
			<a href="https://www.bilibili.com/"><img src="./bilibili.png" alt="" class="icon-style" /></a>
			<a href="https://www.weibo.com/"><img src="./weibo.jpg" alt="" class="icon-style" /></a>
			<a href="https://xinghuo.xfyun.cn/desk"><img src="./kedaxunfei.png" alt="" class="icon-style" /></a>
			<a href="https://chat.openai.com/c/fab07d7b-19b2-4a34-b277-7f243621701e"><img src="./chatgpt.png" alt="" class="icon-style" /></a>
			<a href="https://github.com/"><img src="./github.png" alt="" class="icon-style" /></a>
			<a href="https://www.figma.com/files/recents-and-sharing/recently-viewed?fuid=1293166663911914191"><img src="./figma.png" alt="" class="icon-style" /></a>
			<a href="https://www.youtube.com/"><img src="./YouTube.png" alt="" class="icon-style" /></a>
			<a href="https://www.gitee.com/"><img src="./gitee.ico" alt="" class="icon-style" /></a>
		</div>

		<script>
			let imageIndex = 0 // 用于跟踪当前显示的图片索引
			let imageArray = ['baidu1.png', 'google1.png'] // 图片数组，包含要切换的图片

			function changeImage() {
				var image = document.getElementById('logo')
				// 切换到下一张图片
				imageIndex = (imageIndex + 1) % imageArray.length
				// 更新图片的src属性
				image.src = imageArray[imageIndex]
			}
			const searchBox = document.querySelector('#searchBox')
			// 搜索框获得焦点和失去焦点
			document.addEventListener('DOMContentLoaded', function () {
				searchBox.focus()
				//通过按enter键获得焦点和失去焦点
				document.body.addEventListener('keydown', function (event) {
					if (event.keyCode === 13) {
						const activeElement = document.activeElement
						if (activeElement !== searchBox) {
							searchBox.focus()
						} else {
							if (searchBox.value == '') {
								searchBox.blur()
							}
						}
					}
				})

				// 通过鼠标悬停和离开获得焦点和失去焦点
				searchBox.addEventListener('mouseenter', function () {
					searchBox.focus()
				})

				searchBox.addEventListener('mouseleave', function () {
					searchBox.blur()
				})
			})

			function searchOnBaidu(event) {
				const searchQuery = document.getElementById('searchBox').value
				if (searchQuery !== '') {
					switch (event.key) {
						case 'Enter':
							if (imageIndex === 0) {
								event.preventDefault() // 防止默认的表单提交行为
								const baiduSearchUrl = 'https://www.baidu.com/s?wd=' + encodeURIComponent(searchQuery)
								window.location.href = baiduSearchUrl
							} else if (imageIndex === 1) {
								event.preventDefault() // 防止默认的表单提交行为
								const googleSearchUrl = 'https://www.google.com/search?q=' + encodeURIComponent(searchQuery)
								// window.open(baiduSearchUrl);
								window.location.href = googleSearchUrl
							}
							break
						case 'Alt':
							event.preventDefault() // 防止默认的表单提交行为
							const baiduTranslateUrl = 'https://fanyi.baidu.com/?aldtype=16047#zh/en/' + encodeURIComponent(searchQuery)
							// window.open(baiduTranslateUrl);
							window.location.href = baiduTranslateUrl
							break
					}
				}
			}
		</script>
	</body>
</html>
